<template>
    <!-- 数组样式 -->
    <li :class="['item', item.completed ? 'completed' : '', editingItem && editingItem.id === item.id ? 'pending' : '']">
        <div class="view">
            <!--这里v-model也可以用:checked-->
            <input
                type="checkbox"
                class="toggle"
                v-model="item.completed"
                @change="changeItem(item)"
            />
            <label class="check-icon" @dblclick="dblclickItem(item)">{{ item.value }}</label>
            <button
                class="delete-btn"
                @click="deleteItem(item.id)"
            ></button>
        </div>
        <div class="edit">
            <input
                type="text"
                v-model="item.value"
                @keyup.enter="editItem(item)"
            />
        </div>
    </li>
</template>

<script>
import * as localforage from "localforage";

export default {
    name: "ListItem",
    props: {
        index: {
            type: Number,
            required: true
        },
        item: {
            type: Object,
            required: true
        }
    },
    data: function () {
        return {
            editingItem: null
        }
    },
    // 实例被挂载后调用
    mounted: function () {
        // 点击其他区域隐藏行item编辑框
        document.addEventListener('click', e => {
            if (this.editingItem && !this.$el.contains(e.target)) {
                // 主动更新数据
                this.editItem(this.editingItem);

                // 清空编辑状态
                this.editingItem = null;
            }
        })
    },
    methods: {
        // 勾选条目
        changeItem: function (item) {
            // 更新数据库条目
            localforage.setItem(item.id, item).then(function (value) {
                // 当值被存储后，可执行其他操作
                console.log('更新状态完成.');
            }).catch(function (err) {
                // 当出错时，此处代码运行
                console.log(err);
            });
        },
        // 双击条目
        dblclickItem: function (item) {
            console.info(item)
            this.editingItem = item;
        },
        // 编辑条目
        editItem: function (item) {
            console.info(item)

            // 更新数据库条目
            localforage.setItem(item.id, item).then(function (value) {
                // 当值被存储后，可执行其他操作
                console.log('更新数据完成.');
            }).catch(function (err) {
                // 当出错时，此处代码运行
                console.log(err);
            });
            this.editingItem = null;
        },
        // 删除条目
        deleteItem: function (id) {
            // 从数组中删除当前下标的元素
            this.$parent.list.splice(this.$parent.list.findIndex(item => item.id === id), 1);

            console.info('删除条目ID为: ' + id);

            // 根据id删除指定数据
            localforage.removeItem(id).then(function () {
                // 当值被移除后，此处代码运行
                console.log('Key is cleared!');
            }).catch(function (err) {
                // 当出错时，此处代码运行
                console.log(err);
            });
        }
    }
}
</script>

<style scoped>
</style>
